<div data-bind="modal: fileDialog" class="modal fade media-dialog" data-backdrop="static" data-keyboard="false" style="z-index:200002;padding-top: 60px; ">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header clearfix">
                <button data-bind="click: onHideFileDialog" class="close"><i class="fa fa-close"></i></button>
                <div class="btn-group pull-right">
                    <a data-bind="css: { 'active':curType() == 'list' }, click: changeType.bind(this, 'list')" href="javascript:;" class="btn btn-default" title="List view">
                        <i class="fa fa-list fa-x2"></i>
                    </a>
                    <a data-bind="css: { 'active':curType() == 'grid' }, click: changeType.bind(this, 'grid')" href="javascript:;" class="btn btn-default" title="Grid view">
                        <i class="fa fa-th"></i>
                    </a>
                </div>
                <h4 class="modal-title pull-left" data-bind="text: Kooboo.text.common.File"></h4>
                <ol data-bind="foreach: crumbPath" class="breadcrumb pull-left">
                    <!-- ko ifnot: ($index() == ($parent.crumbPath().length - 1)) -->
                    <li>
                        <a data-bind="click: $parent.onChoosingFolder.bind($data, $data.fullPath), text: $data.name" href="javascript:;"></a>
                    </li>
                    <!-- /ko -->
                    <!-- ko if: ($index() == ($parent.crumbPath().length - 1)) -->
                    <li data-bind="text: $data.name" class="active"></li>
                    <!-- /ko -->
                </ol>
            </div>
            <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                <div data-bind="visible: loading" style="position: absolute;background: rgba(255, 255, 255, 0.8);top:0;left:0;width: 100%;height: 100%;z-index: 1;">
                    <div style="
                    font-size: 36px;
                    font-weight: 300;
                    height: 40px;
                    margin-top: -20px;
                    position: absolute;
                    text-align: center;
                    top: 50%;
                    width: 100%;">
                        <i class="fa fa-spinner fa-spin"></i>
                        <!-- ko text: Kooboo.text.common.loading -->
                        <!-- /ko -->
                    </div>
                </div>

                <!-- ko if: curType() == "list" -->
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="table-checkbox"></th>
                            <th data-bind="text: Kooboo.text.common.URL"></th>
                            <th data-bind="text: Kooboo.text.common.usedBy"></th>
                            <th data-bind="text: Kooboo.text.common.size"></th>
                            <th data-bind="text: Kooboo.text.common.lastModified"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ko foreach: folders -->
                        <tr>
                            <td></td>
                            <td class="table-thumbnail"></td>
                            <td>
                                <a data-bind="click: $parent.onChoosingFolder.bind($data, $data.fullPath)" href="javascript:;">
                                    <i class="table-icon fa fa-folder-open"></i>
                                    <!-- ko text: $data.name -->
                                    <!-- /ko -->
                                </a>
                            </td>
                            <td>-</td>
                            <td data-bind="text: $data.size || '-'"></td>
                            <td data-bind="text: $parent.localDate($data.lastModified)"></td>
                        </tr>
                        <!-- /ko -->
                        <!-- ko foreach: files -->
                        <tr data-bind="click: $parent.onChoosingFile">
                            <td>
                                <input data-bind="checked: $data.selected" type="checkbox" style="pointer-events: none" />
                            </td>
                            <td>
                                <i class="table-icon fa fa-file-o"></i>
                                <!-- ko text: $data.url() -->
                                <!-- /ko -->
                            </td>
                            <td>
                                <!-- ko if: $data.relations.length > 0 -->
                                <!-- ko foreach: { data: Object.keys($data.relations), as: 'refer' } -->
                                <a data-bind="text: $data.relations[refer] + ' ' + refer" href="javascript:;" class="label label-sm blue"></a>
                                <!-- /ko -->
                                <!-- /ko -->
                                <!-- ko ifnot: $data.relations.length > 0 -->
                                -
                                <!-- /ko -->
                            </td>
                            <td data-bind="text: Kooboo.bytesToSize($data.size()) || '-'"></td>
                            <td data-bind="text: $parent.localDate($data.lastModified())"></td>
                        </tr>
                        <!-- /ko -->
                        <!-- ko if: folders().length + files().length ==0 -->
                        <tr>
                            <td colspan="100" class="text-center" data-bind="text: Kooboo.text.common.empty"></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
                <!-- /ko -->
                <!-- ko if: curType() == "grid" -->
                <div class="grid grid-sm">
                    <div data-bind="foreach: folders" class="grid-group folders">
                        <div data-bind="click: $parent.onChoosingFolder.bind($data, $data.fullPath)" class="grid-item grid-folder">
                            <a href="javascript:;">
                                <span class="info">
                                <span data-bind="text: $data.count" class="count"></span>
                                <span data-bind="text: $data.name" class="name"></span>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div data-bind="visible: folders().length + files().length == 0, text: Kooboo.text.common.empty" class="text-center"></div>
                    <div data-bind="foreach: files" class="grid-group files">
                        <div data-bind="click: $parent.onChoosingFile, css: { 'grid-img': $data.isImage, active: $data.selected }" class="grid-item">
                            <a href="javascript:;">
                                <span class="img-wrap"></span>
                                <img alt="" data-bind="attr: { src: $data.thumbnail }">
                                <span class="info">
                                <span class="name">
                                    <i class="fa fa-file-image-o"></i>
                                    <!-- ko text: $data.name --><!-- /ko -->
                                </span>
                                </span>
                            </a>
                            <input data-bind="checked: $data.selected" type="checkbox" name="fileRadio" style="pointer-events: none">
                        </div>
                    </div>
                </div>
                <!-- /ko -->
            </div>
            <div class="modal-footer">
                <a class="btn blue btn-file pull-left btn-file">
                    <span data-bind="text: Kooboo.text.common.upload"></span>
                    <input type="file" data-bind="upload: {
                        allowMultiple: true,
                        acceptTypes: ['*/*'],
                        callback: uploadFile
                    }" />
                </a>
                <button data-bind="click: save, text: Kooboo.text.common.choose, enable: selectedFiles().length > 0" class="btn green"></button>
                <button data-bind="click: onHideFileDialog, text: Kooboo.text.common.cancel" class="btn gray"></button>
            </div>
        </div>
    </div>
</div>